/**
 * 技师管理的增加、编辑
 * @author: minzhang
 * @update: 2016-10-13
 */

import React, {PropTypes} from 'react';
import {Link} from 'dva/router';
import {Form, Input, Modal, Icon, message, Spin, Select, Button, Upload } from 'antd';
import classnames from 'classnames';
import moment from 'moment';
import CommonCodeInput from '../Common/CommonCodeInput';
import CommonPhoneInput from '../Common/CommonPhoneInput';
import CommonUpload from '../Common/CommonUpload';
import CommonToggle from '../Common/CommonToggle';
				
const FormItem = Form.Item;
const Option = Select.Option;

const formItemLayout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 18,
    },
};

const TechManageModal = ({
    title,
    visible,
    item,
    btnLoading,
		fileList,
    modalLoading,
    onOk,
		onOkAndAdd,
		onCancel,
    form: {
			getFieldDecorator,
			validateFields,
			getFieldsValue,
			resetFields,
			setFieldsValue,
    },
}) => {

    function handleOk(callback) {
        validateFields((errors) => {
//            if (errors) {
//                return;
//            }
					debugger
            const data = getFieldsValue();
//						if(item.tech_id) {
//                data.tech_id = item.tech_id;
//            }
						
            callback(data, () => {
                resetFields();
            });
        });
    }
	
		function handleCancel() {
			resetFields();
			onCancel();
    }

    const modalOpts = {
        title,
        visible,
        width: 600,
        maskClosable: false,
				onCancel: handleCancel,
				footer: (
					<div>
						<Button onClick={() => {handleOk(onOkAndAdd)}} size="large" loading={btnLoading}>保存并继续添加</Button>
						<Button type="primary" onClick={() => {handleOk(onOk)}} size="large" loading={btnLoading}>保存</Button>
					</div>
				)
    };

		// 上传组件
		const uploadProps = {
	//		action: `${CONTEXTPATH}/commodity/upload`,
			action: '//jsonplaceholder.typicode.com/posts/',
			fileList,
			maxLength: 3,
			onChange(info) {
				
			},
		};

    return (
        <Modal {...modalOpts}>
					<Spin spinning={modalLoading} tip="加载中...">

						<Form layout="horizontal" className="modal-form">

							<FormItem
								label="工号："
								hasFeedback
								{...formItemLayout}
							>
								{getFieldDecorator('tech_no2', {
									initialValue: item.tech_no,
									rules: [
										{required: true, message: "工号未填写"},
									],
								})(
										<CommonCodeInput type="text" placeholder="请输入工号"/>
								)}
							</FormItem>
							
							<FormItem
								label="姓名："
								hasFeedback
								{...formItemLayout}
							>
								{getFieldDecorator('tech_no', {
									initialValue: item.tech_no,
									rules: [
										{required: true, message: "姓名未填写"},
									],
								})(
										<Input type="text" placeholder="请输入姓名"/>
								)}
							</FormItem>

							<FormItem
								label="性别："
								hasFeedback
								{...formItemLayout}
							>
								{getFieldDecorator('tech_phone', {
									initialValue: item.tech_phone || '',
									rules: [
											{required: true, message: "性别未填写"},
									],
								})(
										<Input type="text" placeholder="请输入性别"/>
								)}
							</FormItem>
							
							<CommonToggle title="添加更多信息" body={
								(
									<div>
										<FormItem
											label="手机号："
											hasFeedback
											{...formItemLayout}
										>
											{getFieldDecorator('name2', {
													initialValue: item.name,
											})(
													<CommonPhoneInput type="text" placeholder="请输入手机号"/>
											)}
									</FormItem>

									<FormItem
											label="头像："
											hasFeedback
											{...formItemLayout}
									>
											{getFieldDecorator('name', {
													initialValue: item.name,
											})(
													<CommonUpload {...uploadProps} />
											)}
									</FormItem>

									<FormItem
											label="简介："
											hasFeedback
											{...formItemLayout}
									>
											{getFieldDecorator('name4', {
													initialValue: item.name,
											})(
													<Input type="textarea" rows={4} placeholder="请输入简介"/>
											)}
									</FormItem>

									<FormItem
											label="擅长："
											hasFeedback
											{...formItemLayout}
									>
											{getFieldDecorator('name1', {
													initialValue: item.name,
											})(
													<Input type="textarea" rows={4} placeholder="请输入擅长"/>
											)}
									</FormItem>
								</div>
								)
							} />

						</Form>

					</Spin>
        </Modal>
    );
};

TechManageModal.propTypes = {
    title: PropTypes.any,
    visible: PropTypes.any,
    item: PropTypes.object,
    btnLoading: PropTypes.any,
    modalLoading: PropTypes.any,
    form: PropTypes.object,
    onOk: PropTypes.func,
};

export default Form.create()(TechManageModal);